/**
 * 泛娱区块链 - 与我相关
 * @author: zaric 
 * @creation time: 2018-12-17
 */


'use strict';
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import NavigationBar from '../../component/navigation/NavigationBar';
import Container from '../../component/common/Container';
import Images from '../../asset';
import SegmentedView from '../../component/segmented/SegmentedView';
import ServicesApi from '../../config/ServicesApi';
import MineList from '../../component/mine/MineList';

class AboutMe extends React.Component {

    constructor(props) {
        super(props);
        this.data = [{ title: '我的回复', type: 'reply' }, { title: '我的评论', type: 'topic' }]
    }

    componentDidMount() {

    }

    renderContent = () => {

    };


    render() {
        return (
            <Container style={styles.container} >
                <NavigationBar
                    title={'与我有关'}
                />
                <SegmentedView
                    ref={(v) => this.segmentedRef = v}
                    barStyle={styles.barStyle}
                    showSegmentedBar={true}
                    scrollEnabled={true}
                    indicatorLineWidth={0}
                    indicatorLineColor={null}
                    showRightMenu={false}
                >
                    {this.data.map((item, index) => {
                        return (
                            <View
                                key={`item_${index}`}
                                title={item.title}
                                style={styles.segmentedItem}
                                titleStyle={styles.titleStyle}
                                activeTitleStyle={styles.activeTitleStyle}>
                                <MineList
                                    uri={ServicesApi.REPLY_QUERY}
                                    query={{
                                        reply_type:item.type,
                                    }}
                                    type={item.type}
                                    initialRefresh={false}
                                    enableLoadMore={true}
                                    enableRefresh={true}
                                    keyExtractor={this._keyExtractor}
                                    renderItem={this._renderItem}
                                    ItemSeparatorComponent={this._renderItemSeparator}
                                    onRefresh={this._onReplyRefresh}
                                    onEndReached={this._onReplyEndReached}
                                    ListHeaderComponent={null}
                                />
                            </View>

                        )
                    })}
                </SegmentedView>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    barStyle: {
        paddingHorizontal: 80,
    },
    titleStyle: {
        fontSize: FontSize(14),
        color: '#878787',
        backgroundColor: 'transparent',
        paddingVertical: 3,
        borderRadius: 2,
        paddingHorizontal: 5,
    },
    activeTitleStyle: {
        fontSize: FontSize(14),
        color: '#fff',
        backgroundColor: Theme.themeColor,
        paddingHorizontal: 5,
        paddingVertical: 3,
        borderRadius: 2,
    },
    sep: {
        height: Theme.minPixel,
        backgroundColor: '#f5f5f5',
        marginLeft: 15,
        marginRight: 15,
    },




});

export default AboutMe